import 'package:flutter/material.dart';

class ScaleDemo extends StatefulWidget {
  const ScaleDemo({super.key});

  @override
  State<ScaleDemo> createState() => _ScaleDemoState();
}

class _ScaleDemoState extends State<ScaleDemo> {
  double _scale = 1.0;
  double _baseScale = 1.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onScaleStart: (details) {
            _baseScale = _scale;
          },
          onScaleUpdate: (details) {
            setState(() {
              _scale = (_baseScale * details.scale).clamp(0.5, 5.0);
            });
          },
          child: Transform.scale(
            scale: _scale,
            child: Container(
              width: 200,
              height: 200,
              decoration: BoxDecoration(
                color: Colors.purple,
                borderRadius: BorderRadius.circular(20),
                image: const DecorationImage(
                  image: NetworkImage('https://picsum.photos/500/500'),
                  fit: BoxFit.cover,
                ),
              ),
              child: Center(
                child: Text(
                  'Scale: ${_scale.toStringAsFixed(2)}x',
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    shadows: [
                      Shadow(
                        blurRadius: 10,
                        color: Colors.black,
                        offset: Offset(2, 2),
                  )],
                  ),
                ),
              ),
            ),
          ),
        ),
        const SizedBox(height: 10),
        const Text("Pinch to zoom in/out"),
        Slider(
          value: _scale,
          min: 0.5,
          max: 5.0,
          onChanged: (value) {
            setState(() {
              _scale = value;
              _baseScale = value;
            });
          },
        ),
      ],
    );
  }
}